<template>
    <el-form status= icon  ref="form" label-width="100px" class="login_container">
        <h3 class="login_title">系统注册</h3>
        <el-form-item label="用户名" label-width="80px" prop="username" class="username">
            <el-input type="input" v-model="username" aria-autocomplete="off" aria-placeholder="请输入账号"
            ></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="80px" prop="password">
            <el-input type="password" v-model="password" aria-autocomplete="off" aria-placeholder="请输入密码"
            ></el-input>
        </el-form-item>
		<el-form-item label="性别" label-width="80px" prop="sex">
		    <el-radio-group v-model="sex">
		          <el-radio label="男">男</el-radio>
		          <el-radio label="女">女</el-radio>
		    </el-radio-group>
		</el-form-item>
		<el-form-item label="email" label-width="80px" prop="email">
		    <el-input type="input" v-model="email" aria-autocomplete="off" aria-placeholder="请输入邮箱"
		    ></el-input>
		</el-form-item>
        <el-form-item class="login_submit" >
            <el-button style="width:160px" type="primary" @click="register" class="login_submit">注册</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import axios from 'axios'

export default {
    name:'register',
    data(){
        return{
            username:'',
            password:'',
			sex:'',
			email:'',
        }
    },
    methods:{
        createId(){//生成随机id
        var code= '';
        var codeLength = 4;
        var random = new Array(0,1,2,3,4,5,6,7,8,9);
        for(var i = 0; i <codeLength; i++){
            var index = Math.floor(Math.random()*9)
            code += random[index]
        }
        return code
        },
        register(){
            if(this.username == ''){
                this.$message.error('用户名不能为空')
            }else if(this.password == ''){
                this.$message.error('密码不能为空')
            }else if(this.email == ''){
				this.$message.error('邮箱不能为空')
			}else{
                axios.post('http://localhost:9999/register',{
                    params:{
                        id: this.createId(),
                        name: this.username,
                        password: this.password,
						sex:this.sex,
						email: this.email
                    }
                }).then(res=>{
                    if(res.data.status == 200){
                        this.$alert('是否返回登录界面','注册成功',{
                            confirmButtonText:'确定',
                            callback: action =>{
                                this.$router.push('/login')
                            }
                        })
                    }else if(res.data.status == 202){
                        this.$alert('用户名已存在',{
                            confirmButtonText: '确定',
                            callback: action =>{
                                this.username = '',
                                this.password = ''
                            }
                        })
                    }else{
                        console.log(res.message)
                    }
                }).catch(err=>{
                    console.log('操作失败' +err)
                })
            }
        }
    }
}
</script>
<style lang="less" scoped>
.login_container{
    width: 400px;
    border-radius: 15px;
    background-clip: padding-box;
    margin: 80px auto;
    padding: 35px 35px 35px 35px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
.login_title{
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}
.login_submit{
    margin: 10px auto 0px auto;
}
</style>